<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Store</title>
<link rel="stylesheet" type="text/css" href="${path }/style/style.css" />
<link rel="stylesheet" href="${path }/style/lightbox.css"
	type="text/css" media="screen" />

<script src="${path }/js/prototype.js" type="text/javascript"></script>
<script src="${path }/js/scriptaculous.js?load=effects"
	type="text/javascript"></script>
<script src="${path }/js/lightbox.js" type="text/javascript"></script>
<script type="text/javascript" src="${path }/js/java.js"></script>
<script type="text/javascript">
	function detailsBook(id) {
		window.location = '${path }/book/detail?id=' + id;
	}

	//参数id,是要添加的商品ID
	function addCart(id) {
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.status == 200) {
				if (xmlHttp.readyState == 4) {
					//请求成功，接收返回的数据：格式:成功标志 0或1 ：购物车商品数量：购物车中总价格
					var str = xmlHttp.responseText;
					alert("=====");
					var arr = str.split(":");
					if(arr[0] == '1'){
						document.getElementById("itemCount").innerHTML = arr[1];
						document.getElementById("allPrice").innerHTML = arr[2];
						alert("添加成功");
						
					}else{
						alert("添加购物车失败");
					}
				}
			}

		}
		var url = "${path}/cart/addCartAjax?bookId=" + id;
		xmlHttp.open("get", url, true);
		xmlHttp.send();
	}
</script>
</head>
<body>
	<div id="wrap">

		<!-- 导入头部 -->
		<jsp:include page="../common/header.jsp">
			<jsp:param value="index" name="css" />
		</jsp:include>

		<div class="center_content">
			<div class="left_content">
				<div class="crumb_nav">
					<a href="${path }/book/index">首页</a> &gt;&gt; ${book.bookName }
				</div>
				<div class="title">
					<span class="title_icon"><img
						src="${path }/images/bullet1.gif" alt="" title="" /></span>${book.bookName }</div>

				<div class="feat_prod_box_details">

					<div class="prod_img">
						<a href="javascript:void(0)"><img
							src="${path }/images/book_img/${book.imgUrl }"
							style="width: 98px; height: 150px;" alt="" title="" border="0" /></a>
						<br /> <br /> <a href="${path }/images/book_img/${book.imgUrl }"
							rel="lightbox"><img src="${path }/images/zoom.gif" alt=""
							title="" border="0" /></a>
					</div>

					<div class="prod_det_box">
						<div class="box_top"></div>
						<div class="box_center">
							<div class="prod_title">图书名称:&nbsp;&nbsp;${book.bookName }</div>
							<p class="details">作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;者：${book.author }</p>
							<p class="details">出&nbsp;&nbsp;版&nbsp;&nbsp;社：${book.publish }</p>
							<p class="details">
								出版日期：
								<fmt:formatDate value="${book.publishDate }"
									pattern="yyyy-MM-dd"></fmt:formatDate>
							</p>


							<div class="price">
								<strong>价格:</strong> <span class="red">${book.price } $</span>
							</div>
							<!-- <div class="price"><strong>COLORS:</strong> 
                    <span class="colors"><img src="images/color1.gif" alt="" title="" border="0" /></span>
                    <span class="colors"><img src="images/color2.gif" alt="" title="" border="0" /></span>
                    <span class="colors"><img src="images/color3.gif" alt="" title="" border="0" /></span>                    
                    </div>
                    -->
							<a href="javascript:void(0)" class="more"><img
								src="${path }/images/order_now.gif"
								onclick="addCart('${book.id }')" alt="" title="" border="0" /></a>
							<div class="clear"></div>
						</div>

						<div class="box_bottom"></div>
					</div>
					<div class="clear"></div>
				</div>


				<div id="demo" class="demolayout">

					<ul id="demo-nav" class="demolayout">
						<li><a class="active" href="#tab1">更多信息</a></li>
						<li><a class="" href="#tab2">相关图书</a></li>
					</ul>

					<div class="tabs-container">

						<div style="display: block;" class="tab" id="tab1">
							<p class="more_details">${book.introduce}</p>
							<ul class="list">
								<li><a href="#">Lorem ipsum dolor sit amet, consectetur
										adipisicing elit</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet, consectetur
										adipisicing elit</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet, consectetur
										adipisicing elit</a></li>
								<li><a href="#">Lorem ipsum dolor sit amet, consectetur
										adipisicing elit</a></li>
							</ul>
							<p class="more_details">Lorem ipsum dolor sit amet,
								consectetur adipisicing elit, sed do eiusmod tempor incididunt
								ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
								nostrud exercitation.</p>
						</div>

						<div style="display: none;" class="tab" id="tab2">
							<div class="new_prod_box">
								<a href="javascript:void(0)">product name</a>
								<div class="new_prod_bg">
									<a href="javascript:void(0)"><img
										src="${path }/images/thumb1.gif" alt="" title="" class="thumb"
										border="0" /></a>
								</div>
							</div>

							<div class="new_prod_box">
								<a href="javascript:void(0)">product name</a>
								<div class="new_prod_bg">
									<a href="javascript:void(0)"><img
										src="${path }/images/thumb2.gif" alt="" title="" class="thumb"
										border="0" /></a>
								</div>
							</div>

							<div class="new_prod_box">
								<a href="javascript:void(0)">product name</a>
								<div class="new_prod_bg">
									<a href="javascript:void(0)"><img
										src="${path }/images/thumb3.gif" alt="" title="" class="thumb"
										border="0" /></a>
								</div>
							</div>

							<div class="new_prod_box">
								<a href="javascript:void(0)">product name</a>
								<div class="new_prod_bg">
									<a href="javascript:void(0)"><img
										src="${path }/images/thumb1.gif" alt="" title="" class="thumb"
										border="0" /></a>
								</div>
							</div>

							<div class="new_prod_box">
								<a href="javascript:void(0)">product name</a>
								<div class="new_prod_bg">
									<a href="javascript:void(0)"><img
										src="${path }/images/thumb2.gif" alt="" title="" class="thumb"
										border="0" /></a>
								</div>
							</div>

							<div class="new_prod_box">
								<a href="javascript:void(0)">product name</a>
								<div class="new_prod_bg">
									<a href="javascript:void(0)"><img
										src="${path }/images/thumb3.gif" alt="" title="" class="thumb"
										border="0" /></a>
								</div>
							</div>



							<div class="clear"></div>
						</div>

					</div>


				</div>



				<div class="clear"></div>
			</div>
			<!--end of left content-->

			<div class="right_content">
				<div class="languages_box">
					<span class="red">Languages:</span> <a href="#"><img
						src="${path}/images/gb.gif" alt="" title="" border="0" /></a> <a
						href="#"><img src="${path}/images/fr.gif" alt="" title=""
						border="0" /></a> <a href="#"><img src="${path}/images/de.gif"
						alt="" title="" border="0" /></a>
				</div>
				<div class="currency">
					<span class="red">Currency: </span> <a href="#">GBP</a> <a href="#">EUR</a>
					<a href="#"><strong>USD</strong></a>
				</div>

				<div class="cart">
					<div class="title">
						<span class="title_icon"><img src="${path}/images/cart.gif"
							alt="" title="" /></span>我的购物车
					</div>
					<!-- 判断当前购物车中是否有物品 -->
					<c:choose>
						<c:when test="${not empty shoppingCart}">
							<div class="home_cart_content" id ="cart">
								<span id="itemCount">${shoppingCart.count}</span>个商品 | <span
									class="red">总计: <span id="allPrice">${shoppingCart.total}</span>元
								</span>
							</div>
							<div>
								<a href="${path}/cart/showcart" class="view_cart">查看购物车</a>
							</div>
						</c:when>
						<c:otherwise>
							<div class="home_cart_content" id ="cart">
								暂无商品，赶快去<a href="${path}/book/index"> 抢购 </a>吧!
							</div>
						</c:otherwise>
					</c:choose>
				</div>

				<div class="title">
					<span class="title_icon"><img
						src="${path}/images/bullet3.gif" alt="" title="" /></span>关于我们店
				</div>
				<div class="about">
					<p>
						<img src="${path}/images/about.gif" alt="" title="" class="right" />
						本书店是天创集团旗下的天智教育经营的书店，开业十年来，一直与国内外五百家出版社，近千家发行单位保持着良好的合作关系。以其集文化传播、艺术鉴赏、休闲为一体的崭新经营方式、一流的购书环境及优质的服务，赢得了众多的荣誉，成为华东地区最大的集图书、音像制品、文化用品、快餐、软件开发、广告策划于一体的图书零售企业。
					</p>

				</div>

				<div class="right_box">

					<div class="title">
						<span class="title_icon"><img
							src="${path}/images/bullet4.gif" alt="" title="" /></span>图书推荐
					</div>
					<!-- 迭代出推荐的图书 -->
					<c:forEach var="book" items="${tuijianBook.datas }">
						<div class="new_prod_box">
							<a href="${path}/book/detail?id=${book.id}">${book.bookName}</a>
							<div class="new_prod_bg">
								<span class="new_icon"> <img
									src="${path}/images/promo_icon.gif" alt="" title="" /></span> <a
									href="${path}/book/detail?id=${book.id}"><img
									style="width: 80px; height: 100px"
									src="${path}/images/book_img/${book.imgUrl}" alt="" title=""
									class="thumb" border="0" /></a>
							</div>
						</div>
					</c:forEach>

				</div>

				<div class="right_box">

					<div class="title">
						<span class="title_icon"><img
							src="${path}/images/bullet5.gif" alt="" title="" /></span>图书分类
					</div>
					<ul class="list">
						<c:forEach var="cate" items="${applicationScope.ALL_CATE}">
							<li><a href="${path}/book/category?cate=${cate.name}">${cate.name}</a></li>
						</c:forEach>
					</ul>

					<div class="title">
						<span class="title_icon"><img
							src="${path}/images/bullet6.gif" alt="" title="" /></span>合作伙伴
					</div>

					<ul class="list">
						<li><a href="#">新电科技(苏州)</a></li>
						<li><a href="#">方正科技(苏州)</a></li>
						<li><a href="#">新宇技术</a></li>
						<li><a href="#">宇信易诚</a></li>
						<li><a href="#">同程网络科技</a></li>
						<li><a href="#">华为技术服务有限公司</a></li>
					</ul>

				</div>
			</div>
			<!--end of right content-->
			
			<%-- <%@ include file="../common/aside.jsp"%> --%>




			<div class="clear"></div>
		</div>
		<!--end of center content-->


		<div class="footer">
			<div class="left_footer">
				<img src="${path }/images/footer_logo.gif" alt="" title="" /><br />
				<a href="http://csscreme.com"><img
					src="${path }/images/csscreme.gif" alt="by csscreme.com"
					title="by csscreme.com" border="0" /></a>
			</div>
			<div class="right_footer">
				<a href="#">home</a> <a href="#">about us</a> <a href="#">services</a>
				<a href="#">privacy policy</a> <a href="#">contact us</a>

			</div>


		</div>


	</div>

</body>
<script type="text/javascript">
	var tabber1 = new Yetii({
		id : 'demo'
	});
</script>
</html>